{% extends 'base.twig' %} 

{% block extraHead %}
<style>
.box { float: left; width: 40%; margin: 0 5px 5px 0; }
.box label,select,input[type=text],input[type=email],input[type=password] { width: 100%; }
.box select,input[type=text],input[type=email],input[type=password] { height: 30px; }
.box textarea { width: 80.5%; font-family: Trebuchet MS; }
input[type=submit] { float: right; margin-left: 5px; }
</style>
{% endblock %} 

{% block contentContainer %}
<div class="container" style="width: 100% !important; max-width: 1140px;">
	<div class="example" style="width: 100%;">
		<div id="h1">
			<h2>{{ model.name ~ ((model._data[0].id) ? ' - ' ~ model._data[0][model.idField] : '') }}</h2>
		</div>
		<div class="clear"></div>
		<div id="bodyContent" style="padding: 0; border: none;">
			<form method="POST" novalidate {{ form_enctype(form) }} autocomplete="off">
        {{ form_widget(form) }}
				<div style="clear: both;"></div>
				<div>&nbsp;</div>
				<div>
					<a href="{{ returnURL }}">Back</a>
					<input type="submit" value="Submit & back" name="action" onclick="return submitMe(event)"; />
					<input type="submit" value="Submit" name="action" onclick="return submitMe(event)"; />
					{% if model._data[0].id %}<input type="submit" value="Remove" name="action" onclick="confirmMe(event);" />{% endif %}
				</div>
			</form>
		</div>
	</div>
</div>
{% endblock %}

{% block extraFoot %}
<script>
	$(function() {
		$('textarea').css('resize', 'vertical');

		$.each($('.ckeditor'), function(key, value) {
			CKEDITOR.replace($(value).attr('name'), {
				filebrowserBrowseUrl: '/secret/assets/?view=ckeditor',
				extraPlugins: 'autogrow',
			});
		});
		CKEDITOR.on("instanceReady", function(event) {
			event.editor.execCommand( 'autogrow' );
		});
	});

	function submitMe(ev) {
// 		ev.preventDefault();
		if (window._updates) {
			for (var idx in window._updates) {
				var itm = window._updates[idx];
				itm();
			}
		}
	}
	
	function confirmMe(ev) {
		ev.preventDefault();
		$this = $(this);
		$.Dialog({
			overlay: true,
			shadow: true,
			title: 'Confirm',
			width: 500,
			onShow: function(_dialog){
				var content = _dialog.children('.content').css('text-align', 'center');
				content.html(
					'<div style="padding-top: 20px;">Click OK to continue<div>' +
					'<div style="padding-top: 50px;">' +
						'<button class="button primary ok">OK</button>&nbsp;' +
						'<button class="button" onclick="$.Dialog.close();">Cancel</button>' +
					'</div>'
				);
				$('.window .content .ok').on('click', function() {
					$.Dialog.close();
					$.ajax({
						type: 'POST',
						url: '{{ path('remove-content') }}',
						data: 'data=' + '{{ model._data[0].id }}&modelName={{ model.name }}',
						success : function(msg) {
							location.href = '{{ returnURL }}';
						}
					});
				});
			}
		});
	}
</script>
{% endblock %}